<!-- 通知页面 -->
<template>
    <div class="notification-container">
      <h2>通知</h2>
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="全部" name="all">
          <div v-for="item in notifications" :key="item.id" class="notification-item"  @click="handleItemClick(item, 'all')">
            <div class="notification-avatar">
              <el-avatar :src="item.avatar" />
            </div>
            <div class="notification-content">
              <p>{{ item.username }} {{ item.content }}  {{ item.contenttitle }}</p>
              <span class="notification-time">{{ item.time }}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="点赞" name="like"  >
          <!-- 点赞通知内容 -->
          <div v-for="item in notifications2" :key="item.id" class="notification-item"@click="handleItemClick(item, 'like')">
            <div class="notification-avatar">
              <el-avatar :src="item.avatar" />
            </div>
            <div class="notification-content">
              <p>{{ item.content }}</p>
              <span class="notification-time">{{ item.time }}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="评论" name="comment"  >
          <!-- 评论通知内容 -->
          <div v-for="item in notifications3" :key="item.id" class="notification-item"  @click="handleItemClick(item, 'comment')">
            <div class="notification-avatar">
              <el-avatar :src="item.avatar" />
            </div>
            <div class="notification-content">
              <p>{{ item.content }}</p>
              <span class="notification-time">{{ item.time }}</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="新增关注" name="guanzhu" @click="guanzhu">
          <!-- 评论通知内容 -->
          <div v-for="item in notifications4" :key="item.id" class="notification-item"  @click="handleItemClick(item, 'guanzhu')">
            <div class="notification-avatar">
              <el-avatar :src="item.avatar" />
            </div>
            <div class="notification-content">
              <p>{{ item.content }}</p>
              <span class="notification-time">{{ item.time }}</span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </template>
  
  <script setup>
    import { ref, computed, onMounted, onUnmounted,watch } from 'vue'
  import request from '../utils/request';
  import { useUserStore } from '../utils/userStore'
  import { formatRelativeTime } from '../utils/formatTime';

  const userStore = useUserStore()
  // 2. 创建响应式 users
  const users = ref([])

  const notifications = ref([])
 //点赞 
 const notifications2 = ref([])
//评论
const notifications3 = ref([])
//新增关注
const notifications4 = ref([])

  // 3. 定义获取用户数据的函数
  const fetchUsers = () => {
    const user = userStore.getUser
    users.value = user
    console.log(users.value)
  }

  onMounted(async () => {
  fetchUsers() //加载当前登录用户信息
  followAuthor();
})

// 当用户登录后状态变化时，重新加载数据
watch(
  () => userStore.getUser, // 监听用户状态变化
  () => {
    // 重新加载数据
    fetchUsers();
    getMainList();
  }
);

  const activeTab = ref('all')

// 切换标签页事件
const handleTabClick = (tab) => {
  
  console.log('切换到标签:', tab.props.name);
  // 这里可以添加加载对应标签数据的逻辑
  switch(tab.props.name) {
    case 'all':
      loadAll();
      break;
    case 'like':
      loadLikes();
      break;
    case 'comment':
      loadComments();
      break;
    case 'guanzhu':
      loadFollows();
      break;
  }
};



  const followAuthor = async() => {
  
  const main = await request.post('/xhs/notify/getNotifyList', {'userid':users.value.id})
  const aa =  main.data.records;
  notifications.value = main.data.records.map(item => ({
    ...item,
    id: item.id,
    content: formatRelativeTime(item.createtime),
    time: item.createtime
  }));
  
}

// 加载所有数据
const loadAll = async () => {
  
  const main = await request.post('/xhs/notify/getNotifyList', {'userid':users.value.id})
  const aa =  main.data.records;
  notifications.value = main.data.records.map(item => ({
    ...item,
    id: item.id,
    time: formatRelativeTime(item.createtime),
  }));
};
  
// 加载点赞数据
const loadLikes = async () => {
  
  const main = await request.post('/xhs/notify/getNotifyList', {'userid':users.value.id,'notifytype':'1'})
  notifications2.value = main.data.records.map(item => ({
    ...item,
    time: formatRelativeTime(item.createtime),
    content: item.notifytype ===1 ? item.username+' 点赞了你的 '+item.contenttitle+' 帖子': item.username+' 收藏了你的 '+item.contenttitle+' 帖子' ,
  })); 
};

//加载评论数据
const loadComments = async () => {
  
  const main = await request.post('/xhs/notify/getNotifyList', {'userid':users.value.id,'notifytype':'2'})
  notifications3.value = main.data.records.map(item => ({
    ...item,
    time: formatRelativeTime(item.createtime),
    content: item.notifytype ===2 ? item.username+' 点赞了你的 '+item.talkcontent +'评论' : item.username+' 评论了你的 '+item.maintitle +'帖子 内容:'+item.talkcontent,
  }));
};

//加载关注数据
const loadFollows = async () => {
  
  const main = await request.post('/xhs/notify/getNotifyList', {'userid':users.value.id,'notifytype':'4'})
  notifications4.value = main.data.records.map(item => ({
    ...item,
    content: item.username+' 关注了你' ,
    time: formatRelativeTime(item.createtime),
  }));
};
  
  


 

  </script>
  
  <style scoped>
  .notification-container {
    padding: 20px;
    max-width: 1300px;
    margin: 0 auto;
  }
  
  .notification-item {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #eee;
  }
  
  .notification-avatar {
    margin-right: 15px;
  }
  
  .notification-content {
    flex: 1;
  }
  
  .notification-content p {
    margin: 0 0 5px;
  }
  
  .notification-time {
    font-size: 12px;
    color: #999;
  }
  </style>